<template>
    <Row ref="panel" class="panel">
        <Col>
            <Row v-for="(item, index) in msgList" :key="index">
                <Col>
                    <Row type="flex" justify="center">
                        <Col>
                            <Time v-if="isToday(item.time)" :time="item.time" />
                            <Time v-else-if="item.time" :time="item.time" type="datetime" />
                        </Col>
                    </Row>
                    <Row id="messageItem" class="item">
                        <Col :class="getClass(item.isSelf, 'avatar')">
                            <Avatar shape="square" icon="md-person" />
                        </Col>
                        <Col v-if="item.type === 'img'">
                            <img :class="getClass(item.isSelf, 'img')" :src="item.content" @click="viewImg(item.content)" />
                        </Col>
                        <Col v-else-if="item.type === 'audio'">
                            <audio :class="getClass(item.isSelf, 'audio')" :src="item.content" controls>
                                您的浏览器不支持音频播放
                            </audio>
                        </Col>
                        <Col v-else-if="item.type === 'video'">
                            <video :class="getClass(item.isSelf, 'video')" :src="item.content" controls>
                                您的浏览器不支持视频播放
                            </video>
                        </Col>
                        <Col v-else-if="item.type === 'file'">
                            <div :class="getClass(item.isSelf, 'file')">
                                <Icon type="md-document" size="30" />
                                <a :href="item.content">下载</a>
                            </div>
                        </Col>
                        <Col v-else-if="item.type === 'txt'" :style="{ float: item.isSelf ? 'right' : 'left' }">
                            <div class="ivu-tooltip-popper" :x-placement="item.isSelf ? 'left-start' : 'right-start'">
                                <div class="ivu-tooltip-content">
                                    <div class="ivu-tooltip-arrow" :style="item.isSelf ? { borderLeftColor: '#b2e281' } : { borderRightColor: '#fff' }"></div>
                                    <div class="ivu-tooltip-inner" :style="{ backgroundColor: item.isSelf ? '#b2e281' : '#fff' }">
                                        <div :class="item.isSelf ? 'self-msg' : 'other-msg'" v-html="convertContent(item.content)">
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        <div style="clear: both"></div>
                    </Row>
                </Col>
            </Row>
        </Col>
        <Modal footer-hide
               width="1000"
               v-model="viewImgVisible"
               @on-visible-change="closeViewImg">
            <Row type="flex" justify="center">
                <Col>
                    <img :src="selectedImg"  style="max-width: 1000px;"/>
                </Col>
            </Row>
        </Modal>
    </Row>
</template>

<script>
    import xss from 'xss';
    const XSS_OPTIONS = {whiteList: {br: []}};
    export default {
        name: 'ChatMessageList',
        components: {},
        props: {
            msgList: Array
        },
        data () {
            return {
                viewImgVisible: false,
                selectedImg: ''
            };
        },
        methods: {
            closeViewImg (val) {
                if (!val) {
                    this.viewImgVisible = false;
                }
            },
            viewImg (src) {
                if (src) {
                    this.selectedImg = src;
                    this.viewImgVisible = true;
                }
            },
            getClass (isSelf, type) {
                return (isSelf ? 'self' : 'other') + '-' + type;
            },
            convertContent (msg) {
                if (msg) {
                    return xss(msg.replace(/\n/g, '<br/>'), XSS_OPTIONS);
                }
                return '';
            },
            // 转换表情字符为图片
            renderContent (txt) {
                let rnTxt = [];
                let match = null;
                let regex = /(\[.*?\])/g;
                let start = 0;
                let index = 0;
                let emoji = this.$im.emoji;
                while ((match = regex.exec(txt))) {
                    index = match.index;
                    if (index > start) {
                        rnTxt.push(txt.substring(start, index));
                    }
                    if (match[1] in emoji.map) {
                        const v = emoji.map[match[1]];
                        rnTxt.push(`<img src=${emoji.path + v} width=20 height=20 />`);
                    } else {
                        rnTxt.push(match[1]);
                    }
                    start = index + match[1].length;
                }
                rnTxt.push(txt.substring(start, txt.length));

                return xss(rnTxt.join(''), XSS_OPTIONS);
            },
            isToday (time) {
                if (time) {
                    let ts = 24 * 60 * 60 * 1000;
                    return new Date().getTime() - new Date(time).getTime() < ts;
                }
                return false;
            }
        },
        watch: {
            msgList () {
                // 滚动到底部
                this.$nextTick(() => {
                    let height = this.$refs.panel.$el.scrollHeight;
                    if (height > 450) {
                        this.$refs.panel.$el.scrollTop = height;
                    }
                });
            }
        }
    };
</script>

<style scoped lang="less">
    @selfColor: #b2e281;
    @otherColor: #fff;
    .panel {
        height: 450px;
        padding: 8px;
        border-top:1px solid #dcdee2;
        border-bottom:1px solid #dcdee2;
        background-color: #eee;
        overflow-y: scroll;
    }
    .item {
        margin: 16px;
    }
    .avatar {
        width: 32px;
    }
    .msg {
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        font-size: 14px;
        line-height: 22px;
        color: #000;
        margin: 0;
    }
    .img {
        cursor: pointer;
        max-width: 350px;
        max-height: 240px;
        border-radius: 4px
    }
    .audio {
        height: 32px;
        outline: none;
    }
    .video {
        width: 300px;
        height: 200px;
        margin-left: 8px;
        outline: none;
    }
    .file {
        float: left;
        padding: 0 8px;
        margin-left: 8px;
        height: 32px;
        line-height: 32px;
        background-color: #fff;
    }
    .self- {
        &avatar {
            .avatar();
            float: right;
        }
        &msg {
            .msg();
            background-color: @selfColor;
        }
        &img {
            .img();
            float: right;
            margin-right: 8px;
        }
        &audio {
            .audio();
            float: right;
            margin-right: 8px;
        }
        &video {
            .video();
            float: right;
            margin-right: 8px;
        }
        &file {
            .file();
            float: right;
            margin-right: 8px;
        }
    }
    .other- {
        &avatar {
            .avatar();
            float: left;
        }
        &msg {
            .msg();
            background-color: @otherColor;
        }
        &img {
            .img();
            margin-left: 8px;
        }
        &audio {
            .audio();
            margin-left: 8px;
        }
        &video {
            .video();
            margin-left: 8px;
        }
        &file {
            .file();
            margin-left: 8px;
        }
    }
</style>

<style lang="less">
    #messageItem {
        .ivu-tooltip-inner {
            max-width: 500px;
            min-height: 34px;
            padding: 8px 12px;
            color: #fff;
            text-align: left;
            text-decoration: none;
            border-radius: 4px;
            box-shadow: 0 1px 6px rgba(0,0,0,.2);
            white-space: nowrap;
        }
        .ivu-tooltip-popper[x-placement^=right] .ivu-tooltip-arrow {
            left: 3px;
            border-width: 5px 5px 5px 0;
        }
        .ivu-tooltip-popper[x-placement^=left] .ivu-tooltip-arrow {
            right: 3px;
            border-width: 5px 0 5px 5px;
        }
        .ivu-tooltip-popper {
            position: inherit;
        }
    }
</style>
